/* eslint-disable no-unused-vars */
<template>
  <div class="login">
    <div class="login-body">
        <div class="body-font">资金管理管理系统开发中。。。</div>
        <div class="body-content">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="content-form">
  <el-form-item label="邮箱">
    <el-input v-model="ruleForm.email"></el-input>
  </el-form-item>
    <el-form-item label="密码">
    <el-input v-model="ruleForm.password" show-password></el-input>
  </el-form-item>
   <el-form-item >
     <el-button type="primary" class="item-btnlogin" @click="login">登录</el-button>
  </el-form-item>
   <el-form-item>
     <span class="item-font">还没有账号？现在<router-link :to="{ path: 'register' }"><span class="font-color">注册</span></router-link></span>
  </el-form-item>
</el-form>
        </div>
    </div>
  </div>
</template>

<script>
import {mapActions, mapState} from 'vuex'


export default {
  name:'Login',
  data(){
      return{
            ruleForm: {
          email: '',
          password: '',
    
        },
        rules: {
          email: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
           password: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          }
      }
  }, 
  computed:{
 ...mapState({
     role:state=>state.role
 })
  },
  methods:{
  ...mapActions({
    loginaction:'loginaction'
  }),
    
      // 登录
  async login(){
    const result  = await this.loginaction(this.ruleForm)
    if (result.code===200) {
      this.$router.push({path:'/index'})
    }
   

      
      
     
      }
  }


}
</script>

<style lang="less" scoped>
.login{
    width: 100%;
    height: 100%;
    background-color: rgb(8, 65, 45);
    display: flex;
    align-items: center;
    justify-content: center;
    .login-body{
        width: 32%;
        height: 45%;
        .body-font{
            height: 15%;
            text-align: center;
            font-size: .2375rem;
            color: white;
            white-space: nowrap;
        }
      .body-content{
          padding: 20px 58px 0px 0px;;
         background-color: white;
         border-radius: 5px;
           
         .content-form{
            
             .item-btnlogin{
                 width: 100%;
             }
             .item-font{
                 float: right;
                 white-space: nowrap;
                 font-size: .15rem;
                 .font-color{
                     color: rgb(75, 75, 194);
                     text-decoration: underline;

                 }
             }
         }

      }
    }
}

</style>>

